<template>
  <div id="contents">
    <el-row class="contents-row" type="flex">
      <el-col :span="3" class="asicol"><asides></asides></el-col>
      <el-col :span="21" class="contents-col">
        <ul class="select">
          <router-link to="/homepage/contents/recommendation" tag="li">个性推荐</router-link>
          <router-link to="/homepage/contents/songlist" tag="li">歌单</router-link>
          <router-link to="/homepage/contents/hoststation" tag="li" >主播电台</router-link>
          <router-link to="/homepage/contents/rank" tag="li" >排行榜</router-link>
          <router-link to="/homepage/contents/singer" tag="li">歌手</router-link>
          <router-link to="/homepage/contents/newestsong" tag="li">最新音乐</router-link>
        </ul>
        <router-view></router-view
      ></el-col>
    </el-row>
  </div>
</template>

<script>
const asides = () => import("../aside/asides");
export default {
  name: "contents",
  data() {
    return {
      contentCount:0,
    };
  },
  components: {
    asides,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#asides {
  height: 100%;
}

.contents-col{
  padding-bottom: 300px;
}
.select {
  margin-top: 20px;
  font-size: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
}
.select li {
  cursor: pointer;
  margin-right: 30px;
  padding-bottom: 5px;
}
.select li.router-link-active {
  font-weight: bold;
  border-bottom: 2px solid #ec4141;
}
</style>